import React, { useRef } from 'react'
import { inject, observer } from 'mobx-react'

import SvgIcon from '../common/svg-icon'
import video from '../../store/video'
import VideoPlayer from '../common/video-player'
import common from '../../store/common'

const StopBtn = () => {
  const { event$ } = common

  const videoPlayerRef = useRef(1)

  function handleClick() {
    const { curScreenId } = video
    const screen = video.findScreenById(curScreenId)
    if (screen) {
      video.setStatus(curScreenId, 'stop')
    }
    videoPlayerRef.current.stopVideo()
  }

  return (
    <>
      <VideoPlayer ref={videoPlayerRef} value={1} />
      <SvgIcon icon={'#iconstop'} handleClick={handleClick} />
    </>
  )
}

export default observer(StopBtn)
